<template>
	<div class="box">
	<div class="showbox">
		<div class="showbox-top">
			<a href="旅游"><img src="../assets/img/1.png"/></a>
			<a href="家具"><img src="../assets/img/2.png"/></a>
			<a href="没事"><img src="../assets/img/3.png"/></a>
			<a href="女装"><img src="../assets/img/4.png"/></a>
		</div>
		<div class="showbox-content">
			<div class="showbox-content-choice">			
			<div class="showbox-content-mark">
				<span>精选</span><span>商家</span>
				<span>Brand selection</span>
			</div>
			<div class="showbox-content-store">
				<div class="showbox-content-store-left">
					<a href="女装"><img src="../assets/img/5.png" /></a>
				</div>
				<div class="showbox-content-store-right">
					<a href="女装"><img src="../assets/img/6.png" /></a>
					<a href="女装"><img src="../assets/img/7.png" /></a>
					<a href="女装"><img src="../assets/img/8.png" /></a>
					<a href="女装"><img src="../assets/img/9.png" /></a>
					<a href="女装"><img src="../assets/img/10.png" /></a>
					<a href="女装"><img src="../assets/img/11.png" /></a>
					<a href="女装"><img src="../assets/img/12.png" /></a>
					<a href="女装"><img src="../assets/img/13.png" /></a>
					<a href="女装"><img src="../assets/img/14.png" /></a>
					<a href="女装"><img src="../assets/img/15.png" /></a>
					<a href="女装"><img src="../assets/img/16.png" /></a>
					<a href="女装"><img src="../assets/img/17.png" /></a>
					</div>		
				</div>
				<a href="女装"><img src="http://odho0ke5x.bkt.clouddn.com/goodsimg/1473321281135.jpg" /></a>               	
			</div>
			<div class="showbox-content-eat" id="eat">
				<div class="showbox-content-marks">			
				<h1>汽车装饰</h1>
				<ul>
					<li v-for="item in car">{{item}}</li>
				</ul>
				<span class="showbox-line"></span>
				</div>
				<div class="showbox-content-kind">
					<a href="###"><img src="../assets/img/18.png"/></a>
					<div class="showbox-content-kind-right">
						<div>
							<img src="../assets/img/19.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/20.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>		
						</div>
						<div>
							<img src="../assets/img/21.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/22.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/23.png" />
							<dl>
					<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/24.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
					</div>
					
				</div>
				<a href="###" class="showbox-content-pic"><img src="../assets/img/25.png"/></a>
			</div>
			<div class="showbox-content-hotel" id="hotel">
				<div class="showbox-content-marks">			
				<h1>精品酒店</h1>
				<ul>
					<li v-for="item in hotel">{{item}}</li>
				</ul>
				<span class="showbox-line"></span>
				</div>
						<div class="showbox-content-kind">
					<a href="###"><img src="../assets/img/26.png"/></a>
					<div class="showbox-content-kind-right">
						<div>
							<img src="../assets/img/27.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/28.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>		
						</div>
						<div>
							<img src="../assets/img/29.png" />
							<dl>
							<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/30.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/31.png" />
							<dl>
						<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/32.png" />
							<dl>
							<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
					</div>
				</div>
				<a href="###" class="showbox-content-pic"><img src="../assets/img/33.png"/></a>
			</div>
			<div class="showbox-content-man" id="man">
				<div class="showbox-content-marks">			
				<h1>男装</h1>
				<ul>
					<li v-for="item in car">{{item}}</li>
				</ul>
				<span class="showbox-line"></span>
				</div>
						<div class="showbox-content-kind">
					<a href="###"><img src="../assets/img/34.png"/></a>
					<div class="showbox-content-kind-right">
						<div>
							<img src="../assets/img/35.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/36.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>		
						</div>
						<div>
							<img src="../assets/img/37.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/38.png" />
							<dl>
						<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/39.png" />
							<dl>
							<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/40.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
					</div>
				</div>
				<a href="###" class="showbox-content-pic"><img src="../assets/img/41.png"/></a>
			</div>
			<div class="showbox-content-build" id="build">
				<div class="showbox-content-marks">			
				<h1>建材</h1>
				<ul>
					<li v-for="item in build">{{item}}</li>
				</ul>
				<span class="showbox-line"></span>
				</div>			
						<div class="showbox-content-kind">
					<a href="###"><img src="../assets/img/42.png"/></a>
					<div class="showbox-content-kind-right">
						<div>
							<img src="../assets/img/43.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/44.png" />
							<dl>
							<dd v-for="item in information">{{item}}</dd>
							</dl>		
						</div>
						<div>
							<img src="../assets/img/45.png" />
							<dl>
							<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/46.png" />
							<dl>
							<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/47.png" />
							<dl>
						<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
						<div>
							<img src="../assets/img/48.png" />
							<dl>
								<dd v-for="item in information">{{item}}</dd>
							</dl>
						</div>
					</div>
				</div>
			</div>
			<a href="###" class="showbox-content-pic"><img src="../assets/img/49.png"/></a>
			</div>
			<ul class="box-floor"  v-if="this.scroll>748">
	<li><a href="#eat">1&nbsp;&nbsp;F<span>汽车</span></a></li>
	<li><a href="#hotel">2&nbsp;&nbsp;F<span>酒店</span></a></li>
	<li><a href="#man">3&nbsp;&nbsp;F<span>男装</span></a></li>
	<li><a href="#build">4&nbsp;&nbsp;F<span>建材</span></a></li>

	<li><a href="#">顶部</a></li>
	<li v-on:click="feedback()">反馈</li>
	<li><a href="">问题</a></li>
	</ul>
			</div>
	<div class="box-black" v-show="blo">
	<div>
	<textarea placeholder="请输入您的意见, 我们将与您共同成长(不得超过200字)"></textarea>
      <span v-on:click="feedback1()">返回</span>
      <span>提交</span>
	</div>
	</div>
	</div>
</template>

<script>    
	export default {
		name : "showbox",
		data (){
			return{
			scroll : "",
			blo:false,			
			car : ["爆款推荐","精品女装","精品男装"],
			hotel : ["优质推荐","精简套房","舒适标间"],
			build : ["好的钢材","好的铁材","好的铜材"],
			information : ["李杰","18699563256","浙江省台州市温岭市人民西路281号"]			
			}
		},
		methods :{
			feedback : function(){
				this.blo = true
			},
			feedback1 : function(){
				this.blo = false
			},
			menu :function(){
				this.scroll = document.documentElement.scrollTop || document.body.scrollTop;
			}
		},
		mounted(){
			window.addEventListener('scroll',this.menu)
		}
	}
</script>

<style scoped>
.showbox{
	width: 1180px;
	margin: 10px auto;	
}
.showbox-top{
	display:flex;
	flex-wrap:nowrap;
	justify-content:space-between;
	position: relative;
}
.showbox-content-mark,.showbox-content-marks{
	padding: 30px 0;	
	border-bottom: 3px solid #018DE2;
	position: relative;
}
.showbox-content-mark>span:nth-of-type(1){
	color: #FE6E00;
	font-size: 30px;
}
.showbox-content-mark>span:nth-of-type(2){
	color: #008CE1;
	font-size: 30px;
}
.showbox-content-mark>span:nth-of-type(3){
	color: #666;
	font-size: 16px;
	margin-left: 10px;
}
.showbox-content-store{
		padding: 8px;
		border: 1px solid #D4D4D4;
		border-top: 0;
		margin-bottom: 10px;
		overflow: hidden;
}
.showbox-content-store-left{
	float: left;
	margin-right: 8px;
}
.showbox-content-store-right{
	width: 836px;
	height: 348px;
	display:flex;
	flex-wrap:wrap;
	align-content:center;
	border: 1px solid rgba(202,202,202,0.5);
}
.showbox-content-store-right>a{
	height: 115px;
	width: 207px;
	text-align: center;
	line-height: 115px;
	border: 1px solid rgba(202,202,202,0.5);
}
.showbox-content-store-right>a:nth-of-type(1)>img{
	width: 146px;
	height: 81px;
}
.showbox-content-store-right>a:hover{
	border: 1px solid rgb(234,122,64);
}
.showbox-content-marks>h1{
	float: left;
	width: 337px;
	color: #008CE1;
	padding-left: 50px;
}
.showbox-content-eat h1{
	background: url(http://odho0ke5x.bkt.clouddn.com/goodsimg/1474422240890.jpg?imageMogr2/thumbnail/30x30!)  no-repeat;
}
.showbox-content-hotel h1{
	background: url(http://odho0ke5x.bkt.clouddn.com/goodsimg/1474422446413.jpg?imageMogr2/thumbnail/30x30!)  no-repeat;
}
.showbox-content-man h1{
	background: url(http://odho0ke5x.bkt.clouddn.com/goodsimg/1474422240890.jpg?imageMogr2/thumbnail/30x30!)  no-repeat;
}
.showbox-content-build h1{
	background: url(http://odho0ke5x.bkt.clouddn.com/goodsimg/1474422420515.jpg?imageMogr2/thumbnail/30x30!)  no-repeat;
}
.showbox-content-marks>ul{
	margin-bottom: 5px;
}
.showbox-content-pic{
	display: inline-block;
	margin: 20px 0;
}
.showbox-content-marks li{
	float: left;
	font-size: 16px;
	color: #666;
	cursor: pointer;
    line-height: 30px;
    padding: 0 25px;
}
.showbox-content-marks li:hover{
	border-bottom: 3px solid #FE6E00;
	padding-bottom: 5px;
	
}
.showbox-content-kind{
	border: 1px solid #D4D4D4;
	border-top: 0;
	overflow: hidden;
	padding: 8px;
}
.showbox-content-kind>a{
	display: inline-block;
	width: 316px;
	height: 511px;	
	float: left;
	margin-right: 8px;
}
.showbox-content-kind-right{
	width: 836px;
	float: right;
	display:flex;
	flex-wrap:wrap;
	justify-content: space-between;
	align-content:center;
}
.showbox-content-kind-right dd{
	margin:10px;
	padding-left: 18px;
}
.showbox-content-kind-right img{
	width: 273px;
	height: 164px;
}
.showbox-content-kind-right dd:nth-of-type(1){
	background: url(../assets/img/55.png) no-repeat;
}
.showbox-content-kind-right dd:nth-of-type(2){
	background: url(../assets/img/56.png) no-repeat;
}
.showbox-content-kind-right dd:nth-of-type(3){
	background: url(../assets/img/57.png) no-repeat;
}
.box-floor{
	font-size: 16px;
	border: 1px solid #D4D4D4;
	position: fixed;
	top: 20px;
	margin-left: 1200px;
}
.box-floor a{	
	display: inline-block;
	width: 42px;
	height: 42px;
	padding: 4px;
	text-align: center;
	border-bottom: 1px solid #D4D4D4;
}
.box-floor>li:nth-of-type(-n+4)>a{
	color: #018CDF;
}
.box-floor>li:nth-of-type(-n+4):hover>a{
	background-color: #008CE1;
	color: white;
}
.box-floor>li:nth-of-type(-n+4):hover span{
    color: white;
}
.box-floor span,.box-floor>li:nth-of-type(n+5)>a{
	color: #666666;
}
.box-floor>li:nth-of-type(n+5)>a{
	height: 26px;
	padding-top: 20px;
	
}
.box-floor>li:nth-of-type(6){
	height: 26px;
	padding-top: 20px;
	border-bottom: 1px solid #D4D4D4;
	text-align: center;
}
.box-floor>li:nth-of-type(5)>a{
	background: url(http://www.youhopelife.com/home_static/images/cb_01.jpg) 50% 10% no-repeat;	
}
.box-floor>li:nth-of-type(6){
	background: url(http://www.youhopelife.com/home_static/images/cb_02.jpg) 50% 10% no-repeat;
}
.box-floor>li:nth-of-type(7)>a{
	background: url(http://www.youhopelife.com/home_static/images/cb_03.jpg) 50% 10% no-repeat;
}
.box-black{
	/*display: none;*/
	width: 100%;
	height: 1500px;
	background-color: rgba(0,0,0,0.4);
	position: fixed;
	top: 0;
	left: 0;
}
.box-black>div{
	width: 608px;
    height: 350px;
    border: 4px solid #E2E2E2;
    padding: 20px;
    position: fixed;
    top: 50%;
    left: 50%;
    margin: -199px 0 0 -328px;
    z-index: 2;
    background: white;
    text-align: center;
}
.box-black textarea{
	width: 100%;
    box-sizing: border-box;
    padding: 10px;
    font-size: 16px;
    height: 270px;
    line-height: 20px;
    font-family: "Microsoft Yahei";
}
.box-black span{
	display: inline-block;
	width: 80px;
	height: 30px;
	color: white;
	text-align: center;
	line-height: 30px;
	font-size: 16px;
	margin-right: 50px;
	margin-top: 30px;
	border-radius: 10%;
}
.box-black span:nth-of-type(1){
	background-color: #9CA09F;
}
.box-black span:nth-of-type(2){
	background-color: #FE6E00;
}
</style>